<template>
    <el-card class="box-card" shadow="hover">
           <el-form  label-position="right" :model="form" label-width="120px">
                <el-form-item label="书名">
                    <el-input v-model="form.bookName" />
                </el-form-item>
                 <el-form-item label="作者">
                    <el-input v-model="form.author" />
                </el-form-item>
                <el-form-item label="分类">
                <el-select v-model="form.classIfy" placeholder="选择分类">
                    <el-option v-for="item in tagList.list" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model.number="form.number" />
                </el-form-item>
                <el-form-item label="封面">
                      <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="form.img" :src="form.img" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                </el-form-item>
                <el-form-item>   
                <el-button type="primary" @click="onSubmit">新增</el-button>
                </el-form-item>
            </el-form>
    </el-card>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import  cors  from '../../utils/cors';
import tagApiFun from '../../hooks/Tag/tagApiFun';
import userBooksApi from '../../hooks/Books/userBooksApi';

import { ElLoading, ElMessage, ElMessageBox   } from 'element-plus';
import { Delete, Plus } from '@element-plus/icons-vue';

const GetApiUrl = '/books/getBooksClassIfy'

const AddApiUrl = '/books/addBooks'

import type { UploadProps } from 'element-plus'




const beforeAvatarUpload: UploadProps['beforeUpload'] = async (rawFile) => {
    console.log(rawFile)
    const file = rawFile;
    const name = rawFile.name;
    await cors.up(file,name)
    const result:any = await cors.getUrl(name)
    form.img = result.location.split('?')[0]
    return true
}


interface limitList {
    list: any
}


const tagList = reactive<limitList>({
    list: []
})

const form = reactive({
  bookName: '',
  author: '',
  classIfy: '',
  img: '',
  number: ''
})

const onSubmit = async () => {
    const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
    try {
        const res:any = await userBooksApi(AddApiUrl,form);
        if (res.data.status !== 200) return ElMessage.error(res.data.message);
        ElMessage.success('新增成功');
    } catch (e: any) {
        return ElMessage.error('获取失败');
    } finally {
        loading.close();
    }
}




const getAllTagFun = async () => {
    const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
    try {
        const res:any = await tagApiFun(GetApiUrl);
        if (res.data.status !== 200) return ElMessage.error(res.data.message);
        tagList.list = res.data.data
    } catch (e: any) {
        return ElMessage.error('获取失败');
    } finally {
        loading.close();
    }
}

getAllTagFun()


const addTagFun = () => {

}



</script>
<style lang="scss" scoped>
@import './AddBooks.scss'
</style>